<!--
* description: 整车销售---订单分配
* author:xlc
* createdDate: 2020-11-17
-->
<template>
  <div class="app-container app-container-table">
    <el-dialog
      v-dialogDrag
      style="margin:15px"
      :visible="popupsVisible"
      :title="titleName"
      center
      width="90%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
      <div>
        <!-- 表单组件 -->
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="true"
          :dynamic-is-show-more-btn="true"
          :dynamic-table-defult-height="300"
          :callback-obj="callbackObj"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/vesalesapi.js'
import OneTableTemplate from '@/components/templates/oneTable'
import dialogHeader from '@/components/dialogHeader'
import Vue from 'vue'
export default {
  components: {
    OneTableTemplate,
    dialogHeader
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, 'supplierMessage-edit'], () => {
      next()
    })
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      titleName: '订单分配',
      selectdata: {
        type: Object,
        default: () => {}
      },
      // 网格查询API配置对象
      apiConfig: orgApis.orderAllocationDeliveryQuery,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          disabled: true,
          clickEvent: () => this.confirm(),
          text: '确认',
          name: 'confirm',
          position: 'left',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey4',
          type: '',
          size: 'small',
          clickEvent: () => this.closeEdit(),
          text: '取消',
          name: 'cancel',
          position: 'left'
        },
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(),
          text: this.$t('sys.button.query'),
          name: 'search', // 按钮图标样式
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey4',
          type: '',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          name: 'reset',
          position: 'right' // 重置
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 显示组件
            {
              compKey: 'compKey1',
              labelName: '交付专员：',
              codeField: 'empName',
              isMul: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true
            }
          ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'dlrFullName',
              label: '交付门店',
              width: 120,
              isMul: false,
              align: 'center'
            },
            {
              prop: 'empName',
              label: '交付专员',
              width: 120,
              isMul: false,
              align: 'center'
            },
            {
              prop: 'caEmpPho',
              label: '联系电话',
              width: 100,
              isMul: false,
              align: 'center'
            },
            {
              prop: 'gender',
              label: '性别',
              width: null,
              isMul: false,
              align: 'center'
            },
            {
              prop: 'empOrderNum',
              label: '订单数量',
              width: null,
              isMul: false,
              align: 'center'
            }
          ],
      formField: {
        empName: '',
        dlrId: this.dataForForm.dlrId,
        saleOrderCodeC: this.dataForForm.saleOrderCodeC
      },
      // 是否使用刷新Key的方式刷新弹窗
      resetDialogKey: false,
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 手动勾选时
        onCheckSelect: (selection, row) => {
          // 清除所有选中
          this.$refs.multipleTable.$refs.multipleTable.clearSelection()
          if (selection.length === 0) return
          // 将当前点击项选中
          this.editRowData = row
          this.$refs.multipleTable.$refs.multipleTable.toggleRowSelection(row, true)
        },
        onCheckSelectChange: (selection) => {
          this.onCheckSelectChange1(selection)
        }
      }
    }
  },
  created() {
    // this.formField.dlrId = this.dataForForm.dlrId
  },
  mounted() {
    this.$nextTick(() => {
      this.queryTable(1)
    })
  },
  methods: {
    onCheckSelectChange1(selection) {
      var btns = this.tableButtons[0]
      const isCheck = selection && selection.length > 0
      btns.disabled = !isCheck
    },
    // 分配确认
    confirm() {
      this.$emit('save', { empId: this.editRowData.empId })
    },
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    }
  }
}
</script>
<style lang="scss" scoped>
 /deep/ .el-table__header .el-checkbox{
    display:none
  }
</style>
